<template>
  <div class="order-container">
    <el-row>
      <el-col :span="24">
        <normal-filter :filterProps="filterProps" />
      </el-col>
    </el-row>
    <el-row>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="$router.push('/signIn/activity/add')"
        >添加活动</el-button
      >
    </el-row>
    <el-row class="table-container">
      <Table
      @sizeChange="sizeChange"
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :showDetailBtn="true"
        :pagination="pagination"
        @currentPage="goCurrent"
        @detail="goDetail"
        @delete="del"
        @modify="toEdit"
      >
      </Table>
    </el-row>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import { Message } from "element-ui";
import Upload from "@/components/UploadFile";
import Table from "@/components/Table";
import { getList, delItem } from "@/api/signInActivity";
import { pagination, page } from "@/utils/enumConfig";

export default {
  name: "SignInActivity",
  components: {
    normalFilter,
    Table,
    Upload
  },
  data() {
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "name",
          title: "活动名称",
          placeholder: "请输入",
          width: 400
        },
        {
          type: "select",
          title: "活动状态",
          id: "status",
          placeholder: "请选择",
          width: 150,
          options: [
            {
              title: "全部",
              key: "",
              value: ""
            },
            {
              title: "开启",
              key: "1",
              value: 1
            },
            {
              title: "禁用",
              key: "0",
              value: 0
            }
          ]
        }
      ],
      onFilterChange: value => {
        this.filterParam = value;
        this.getList({
          ...value,
          ...page
        });
      }
    };
    const columnProps = [
      {
        title: "活动名称",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "活动地点",
        dataIndex: "activityAddr",
        key: "activityAddr"
      },
      {
        title: "活动图片",
        dataIndex: "activityImageUrl",
        key: "activityImageUrl",
        width: 200,
        render: record => {
          return `<img style="width:150px;height:80px;object-fit:contain" src="${record.activityImageUrl}"></img>`;
        }
      },
      {
        title: "开始时间",
        dataIndex: "starTime",
        key: "starTime"
      },
      {
        title: "结束时间",
        dataIndex: "endTime",
        key: "endTime"
      },
      {
        title: "活动状态",
        dataIndex: "status",
        key: "status",
        width: 100,
        render: record => {
          return `<span">${record["status"] === 1 ? "开启" : "关闭"}</span>`;
        }
      }
    ];
    return {
      loading: false,
      showImportModal: false,
      filterProps,
      columnProps,
      list: [],
      tableData: [],
      pagination: this.$_.cloneDeep(pagination),
      filterParam: null,
      show: false,
      curItem: {},
      file: null
    };
  },
  async created() {
    let { pageIndex } = this.pagination;
    let param = {
      current: pageIndex
    };
    this.getList(param);
  },
  methods: {
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
    goCurrent(currentIndex) {
      console.log(currentIndex);
      let { pageSize, pageIndex } = this.pagination;
      let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
      this.getList(param);
    },
    modify({ id }) {
      this.$router.push({ path: `/order/update/${id}` });
    },
    async getList(param) {
      let { records, size, total, current } = await getList(param),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current
      };
      console.log("records", records);
      this.tableData = records;
    },
    goDetail({ id }) {
      this.$router.push(`/signIn/activity/detail/${id}`);
    },
    async del({ id }) {
      let res = await delItem({ id });
      if (res.code === 1) {
        let { pageIndex } = this.pagination;
        this.getList({
          ...this.filterParam,
          current: 1
        });
      }
    },
    toEdit({ id }) {
      this.$router.push({ path: `/signIn/activity/update/${id}` });
    }
  }
};
</script>

<style lang="scss" scoped>
.order-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .table-container {
    margin-top: 20px;
  }
  .send-btn {
    margin: 10px 0;
  }
}
</style>
